<template>
  <div class="app-container">
    <el-table :stripe="true" :fit="true" :key="key" height="calc(100vh - 200px)" :data="tableList" border highlight-current-row >
      <el-table-column align='center' prop="deviceName" label="机 器 名 称" width="120"/>
      <el-table-column v-for="energy in formThead" :key="energy" :label="energy" width="100">
        <template slot-scope="scope">
          {{ scope.row[energy] }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableList: [],
      tableType: '',
      tableDaily: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00'],
      tableMonthly: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
      tableYearly: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
      key: 1, // table key
      formThead: [] // 默认表头 Default header
    }
  },
  methods: {
    changeForm (val) {
      this.tableList = val.listData
      this.formThead = val.header
      this.key = this.key + 1
    }
  }
}
</script>
